<template>
  <div id="app">
    <nav>
      <el-container style="height: 900px; border: 1px solid #eee; ">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']"
                   default-active="2"
                   class="el-menu-vertical-demo"
                   background-color="#545c64"
                   text-color="#d2691e"
                   active-text-color="#ffd04b"
                   style="height:100%"
                   @select="menu">
            <el-menu-item-group>
              <template slot="title"><h2>进销存管理系统</h2></template>

            <div v-if="role[0]"><el-submenu index="1">
              <template slot="title"><i class="el-icon-folder-opened"></i><span slot="title">资料管理</span></template>
                <div v-if="power[0]"><el-menu-item index="1-1"><span slot="title">供应商管理</span></el-menu-item></div>
              <div v-if="power[1]"><el-menu-item index="1-2">客户管理</el-menu-item></div>
            </el-submenu></div>

              <div v-if="role[1]"><el-submenu index="2">
                <template slot="title"><i class="el-icon-shopping-cart-2"></i><span slot="title">采购管理</span></template>
                <div v-if="power[2]"> <el-menu-item index="2-1"><span slot="title">采购入库</span></el-menu-item></div>
                <div v-if="power[3]"><el-menu-item index="2-2">采购信息查询</el-menu-item></div>
              </el-submenu></div>

              <div v-if="role[2]"><el-submenu index="3">
                <template slot="title"><i class="el-icon-sell"></i><span slot="title">销售管理</span></template>
                <div v-if="power[4]"><el-menu-item index="3-1">销售出库</el-menu-item></div>
                <div v-if="power[5]"><el-menu-item index="3-2">销售信息查询</el-menu-item></div>
              </el-submenu></div>

              <div v-if="power[6]"><el-menu-item index="4-1">
                <template slot="title"><i class="el-icon-key"></i><span slot="title">库存管理</span></template>
              </el-menu-item></div>

              <div v-if="role[3]"><el-submenu index="5">
                <template slot="title"><i class="el-icon-message"></i><span slot="title">统计信息</span></template>
                <div v-if="power[7]"> <el-menu-item index="5-1">销售统计</el-menu-item></div>
                <div v-if="power[8]"><el-menu-item index="5-2">客户统计</el-menu-item></div>
              </el-submenu></div>

              <div v-if="role[4]"><el-submenu index="6">
                <template slot="title"><i class="el-icon-s-check"></i><span slot="title">权限管理</span></template>
                <div v-if="power[9]"><el-menu-item index="6-1">用户管理</el-menu-item></div>
                  <div v-if="power[10]"><el-menu-item index="6-2">角色管理</el-menu-item></div>
              </el-submenu></div>

              <div v-if="role[5]"><el-submenu index="7">
                <template slot="title"><i class="el-icon-user"></i><span slot="title">个人信息管理</span></template>
                <div v-if="power[11]">
                <el-menu-item index="7-1">修改密码</el-menu-item>
                </div>
              </el-submenu></div>

              <div v-if="role[6]"><el-submenu index="8">
                <template slot="title"><i class="el-icon-s-finance"></i><span slot="title">日志信息</span></template>
                <div v-if="power[12]">
                <el-menu-item index="8-1">日志一览</el-menu-item>
                </div>
              </el-submenu></div>

            </el-menu-item-group>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px;background-color: dimgray; line-height:60px">
            <span style="position: relative;right: 700px;font-family: Gabriola;font-size: 20px;color: red">进销存管理系统</span>
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px;color: black"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="log">登录</el-dropdown-item>
                <el-dropdown-item @click.native="cancel">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span style="color: red">{{username}}</span>
          </el-header>

          <!--页面区-->
          <el-main>
            <router-view/>
          </el-main>

        </el-container>
      </el-container>
    </nav>

    <!--dialog-->
    <el-dialog
        :visible.sync="Userlogin"
        width="34%"
        :before-close="closeLog">
      <userlogin @init="init" @getuser="getuser" @close="closeLog"></userlogin>
    </el-dialog>
  </div>
</template>
<script>
import userlogin from "@/components/Login";
export default {
  name:'App',
  components:{
    userlogin
  },
  data() {
    return {
      username:'请登录',
      headPhoto:'https://p2.ssl.qhimgs1.com/sdr/400__/t0101908ca4cdd81b4c.jpg',
      power:[false,false,false,false,false,false,false,false,false,false,false,false,false,false],
      role:[false,false,false,false,false,false,false],
      rolepower:[],
      Userlogin:false
    }
  },
  mounted() {
    this.getuser()
    this.init()
  },
  methods:{
    init(){
      this.rolepower.forEach(
          r=>{
        console.log(r)
        switch (r){
          case 1:this.power[0]=true;this.role[0]=true;break;
          case 2:this.power[1]=true;this.role[0]=true;break;
          case 3:this.power[2]=true;this.role[1]=true;break;
          case 4:this.power[3]=true;this.role[1]=true;break;
          case 5:this.power[4]=true;this.role[2]=true;break;
          case 6:this.power[5]=true;this.role[2]=true;break;
          case 7:this.power[6]=true;break;
          case 8:this.power[7]=true;this.role[3]=true;break;
          case 9:this.power[8]=true;this.role[3]=true;break;
          case 10:this.power[9]=true;this.role[4]=true;break;
          case 11:this.power[10]=true;this.role[4]=true;break;
          case 12:this.power[11]=true;this.role[5]=true;break;
          case 13:this.power[12]=true;this.role[6]=true;break;
        }
      })
    },
    getuser(){
      let user = sessionStorage.getItem("user")
      if (user == null || user == 'null'){
        this.username = '请登录'
        this.rolepower = []
        this.power=[false,false,false,false,false,false,false,false,false,false,false,false,false,false]
        this.role=[false,false,false,false,false,false,false]
      }else{
        let jsonuser = JSON.parse(user)
        this.username = jsonuser.userName
        this.rolepower = jsonuser.userPower
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    menu(index){
      console.log(index)
      switch (index){
        case '1-1':this.$router.push("/provider");break
        case '1-2':this.$router.push("/client");break
        case '2-1':this.$router.push("/buy");break
        case '2-2':this.$router.push("/buyinfo");break
        case '3-1':this.$router.push("/sale");break
        case '3-2':this.$router.push("/saleinfo");break
        case '4-1':this.$router.push("/storemanager");break
        case '5-1':this.$router.push("/salecount");break
        case '5-2':this.$router.push("/clientcount");break
        case '6-1':this.$router.push("/usermanager");break
        case '6-2':this.$router.push("/rolemanager");break
        case '7-1':this.$router.push("/updatepwd");break
        case '8-1':this.$router.push("/logmanager");break
      }
    },
    log(){
      this.Userlogin = true
    },
    closeLog(){
      this.Userlogin = false
      this.Userregister = false
    },
    cancel(){
      sessionStorage.setItem("user",'null')
      this.getuser()
      this.init()
      this.$router.push("/")
    }
  }
};
</script>
<style>

</style>
